<%@ page import="entity.Note" %>
<%@ page import="entity.Remark" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="entity.Users" %><%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2020/9/16
  Time: 11:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="gb2312">
    <title>白金之星个人博客</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/base.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
    <link href="css/m.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style1.css">
    <link rel="stylesheet" href="css/comment.css">

    <script src="js/jquery-2.1.1.min.js"></script>

    <link rel="icon" type="image/x-icon" href="images/logo/logo.png">

    <!--[if lt IE 9]>
    <script src="js/modernizr.js"></script>
    <![endif]-->
    <script>
        window.onload = function () {
            var oH2 = document.getElementsByTagName("h2")[0];
            var oUl = document.getElementsByTagName("ul")[0];
            oH2.onclick = function () {
                var style = oUl.style;
                style.display = style.display == "block" ? "none" : "block";
                oH2.className = style.display == "block" ? "open" : ""
            }
        }
    </script>
</head>
<body onload="loads()">

<header>
    <div class="tophead">
        <%
            Users users = (Users) session.getAttribute("users");
        %>
        <div class="logo"><a href="/"><%=users.getUsername()%>的个人博客</a></div>
        <nav class="topnav" id="topnav">
            <ul>
                <li><a href="refresh.index">网站首页</a></li>
                <li><a href="about.jsp">关于我</a></li>
                <li><a href="share.jsp">模板分享</a></li>
                <li><a href="list.jsp">学无止境</a></li>
            </ul>
        </nav>
    </div>
</header>
<article>
    <input style="display: none" name="noteid" id="noteid"/>
    <h1 class="t_nav"><span></span><a href="/" class="n1">网站首页</a><a href="/" class="n2">慢生活</a>
    </h1>
    <div style="background: #FFFFFF;width: 1200px">
        <div style="width: 1000px; height:auto;margin: 0 auto;">
            <%Note note = (Note) request.getAttribute("note");%>
            <h3 class="news_title" style="text-align: center"><%=note.getNotetitle()%>
            </h3>
            <div class="news_author"><span class="au01"><a href="mailto:dancesmiling@qq.com">JOJO!</a></span><span
                    class="au02"><%=note.getNotedate()%></span><span class="au03">共<b><script
                    src="/e/public/ViewClick/?classid=5&amp;id=816&amp;addclick=1"></script><%=note.getNotereadnum()%></b>人围观</span>
            </div>
            <br>
            <div class="tags"><a><%=note.getNotetag()%>
            </a></div>
            <br>
            <div class="news_infos" style="width: 1000px;font-size: 18px;line-height:40px">
                <%=note.getNotetext()%>
            </div>
            <div style="height:100px;width: 100%;padding-top: 50px;position: relative;cursor: pointer">
                <img id="imagezan" src="images/zan.png" style="position: absolute;right: 0;width: 50px;height: 50px;">
                <span id="notezan_span" for="imagezan" style="position: absolute;right: 8px;top: 95px;font-size: 18px">
                    <%=note.getNotezan()%>
                </span>
            </div>

        </div>

    </div>

    <!--        此处插入jquery评论插件-->
    <!--
    此评论textarea文本框部分使用的https://github.com/alexdunphy/flexText此插件
    -->
    <div class="commentAll" style="width: 1150px;background: #FFFFFF">
        <!--评论区域 begin-->
        <div class="reviewArea clearfix">
            <textarea class="content comment-input" placeholder="Please enter a comment&hellip;"
                      onkeyup="keyUP(this)"></textarea>
            <a href="javascript:;" class="plBtn">评论</a>
        </div>
        <!--评论区域 end-->
        <!--回复区域 begin-->
        <div class="comment-show">

            <%
                ArrayList<Remark> remarks = (ArrayList<Remark>) request.getAttribute("remarks");
                if (remarks != null) {
                    for (int i = 0; i < remarks.size(); i++) { %>
            <div class="comment-show-con clearfix">
                <div class="comment-show-con-img pull-left"><img src="images/header-img-comment_03.png" alt=""></div>
                <div class="comment-show-con-list pull-left clearfix">
                    <div class="pl-text clearfix">
                        <a href="#" class="comment-size-name"><%=remarks.get(i).getUsername()%>: </a>
                        <span class="my-pl-con">&nbsp;<%=remarks.get(i).getRemarktext()%></span>
                    </div>
                    <div class="date-dz">
                        <span class="date-dz-left pull-left comment-time"><%=remarks.get(i).getRemarkdate()%></span>
                        <div class="date-dz-right pull-right comment-pl-block">
                            <a href="javascript:;" class="removeBlock">删除</a>
                            <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a>
                            <span class="pull-left date-dz-line">|</span>
                            <a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i
                                    class="z-num"><%=remarks.get(i).getRemarkzan()%>
                            </i>)</a>
                        </div>
                    </div>
                    <div class="hf-list-con"></div>
                </div>
            </div>
            <%
                    }
                }

            %>
        </div>
        <!--回复区域 end-->
    </div>
    <!--          评论插件截止-->
</article>

<footer>
    <p>Design by 白金之星</p>
</footer>
<script src="js/nav.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    jQuery.noConflict();
    jQuery(function () {
        var elm = jQuery('#left_flow2');
        var startPos = jQuery(elm).offset().top;
        jQuery.event.add(window, "scroll", function () {
            var p = jQuery(window).scrollTop();
            jQuery(elm).css('position', ((p) > startPos) ? 'fixed' : '');

            jQuery(elm).css('top', ((p) > startPos) ? '0' : '');
        });
    });
</script>

<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="js/jquery.flexText.js"></script>
<!--评论插件js代码-->

<!--textarea高度自适应-->
<script type="text/javascript">
    $(function () {
        $('.content').flexText();
    });
</script>
<!--textarea限制字数-->
<script type="text/javascript">
    function keyUP(t) {
        var len = $(t).val().length;
        if (len > 139) {
            $(t).val($(t).val().substring(0, 140));
        }
    }
</script>
<!--点击评论创建评论条-->
<script type="text/javascript">
    $('.commentAll').on('click', '.plBtn', function () {
        var username = "<%=((Users)request.getAttribute("users")).getUsername()%>";
        var noteid =<%=request.getAttribute("noteid")%>;
        var remarkzan = 0;
        var myDate = new Date();
        //获取当前年
        var year = myDate.getFullYear();
        //获取当前月
        var month = myDate.getMonth() + 1;
        //获取当前日
        var date = myDate.getDate();
        var h = myDate.getHours();       //获取当前小时数(0-23)
        var m = myDate.getMinutes();     //获取当前分钟数(0-59)
        if (m < 10) m = '0' + m;
        var s = myDate.getSeconds();
        if (s < 10) s = '0' + s;
        var now = year + '-' + month + "-" + date + " " + h + ':' + m + ":" + s;
        //获取输入内容
        var oSize = $(this).siblings('.flex-text-wrap').find('.comment-input').val();
        console.log(oSize);
        //动态创建评论模块
        oHtml = '<div class="comment-show-con clearfix"><div class="comment-show-con-img pull-left"><img src="images/header-img-comment_03.png" alt=""></div> <div class="comment-show-con-list pull-left clearfix"><div class="pl-text clearfix"> <a href="#" class="comment-size-name">' + username + ' : </a> <span class="my-pl-con">&nbsp;' + oSize + '</span> </div> <div class="date-dz"> <span class="date-dz-left pull-left comment-time">' + now + '</span> <div class="date-dz-right pull-right comment-pl-block"><a href="javascript:;" class="removeBlock">删除</a> <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a> <span class="pull-left date-dz-line">|</span> <a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num">' + remarkzan + '</i>)</a> </div> </div><div class="hf-list-con"></div></div> </div>';
        if (oSize.replace(/(^\s*)|(\s*$)/g, "") != '') {
            $(this).parents('.reviewArea ').siblings('.comment-show').prepend(oHtml);
            $(this).siblings('.flex-text-wrap').find('.comment-input').prop('value', '').siblings('pre').find('span').text('');

            //点击评论发送ajax请求
            $.ajax(
                {
                    type: "POST",
                    url: "remark.action",
                    // data:{"username":$("#username").val(),"password":$("#password").val()},
                    data: {
                        "username": username,
                        "remarkdate": now,
                        "remarktext": oSize,
                        "remarkzan": remarkzan,
                        "noteid": noteid
                    },
                    success: function (data) {
                        // alert(data)
                        if (data.toString() != "评论成功") {
                            // alert(data);
                        }
                    }
                }
            )
        } else {
            alert("评论不能为空");
        }


    });
</script>
<!--点击回复动态创建回复块-->
<script type="text/javascript">
    $('.comment-show').on('click', '.pl-hf', function () {
        //获取回复人的名字
        var fhName = $(this).parents('.date-dz-right').parents('.date-dz').siblings('.pl-text').find('.comment-size-name').html();
        //回复@
        var fhN = '回复@' + fhName;
        //var oInput = $(this).parents('.date-dz-right').parents('.date-dz').siblings('.hf-con');
        var fhHtml = '<div class="hf-con pull-left"> <textarea class="content comment-input hf-input" placeholder="" onkeyup="keyUP(this)"></textarea> <a href="javascript:;" class="hf-pl">评论</a></div>';
        //显示回复
        if ($(this).is('.hf-con-block')) {
            $(this).parents('.date-dz-right').parents('.date-dz').append(fhHtml);
            $(this).removeClass('hf-con-block');
            $('.content').flexText();
            $(this).parents('.date-dz-right').siblings('.hf-con').find('.pre').css('padding', '6px 15px');
            //console.log($(this).parents('.date-dz-right').siblings('.hf-con').find('.pre'))
            //input框自动聚焦
            $(this).parents('.date-dz-right').siblings('.hf-con').find('.hf-input').val('').focus().val(fhN);
        } else {
            $(this).addClass('hf-con-block');
            $(this).parents('.date-dz-right').siblings('.hf-con').remove();
        }
    });
</script>
<!--评论回复块创建-->
<script type="text/javascript">
    $('.comment-show').on('click', '.hf-pl', function () {
        var oThis = $(this);
        var myDate = new Date();
        //获取当前年
        var year = myDate.getFullYear();
        //获取当前月
        var month = myDate.getMonth() + 1;
        //获取当前日
        var date = myDate.getDate();
        var h = myDate.getHours();       //获取当前小时数(0-23)
        var m = myDate.getMinutes();     //获取当前分钟数(0-59)
        if (m < 10) m = '0' + m;
        var s = myDate.getSeconds();
        if (s < 10) s = '0' + s;
        var now = year + '-' + month + "-" + date + " " + h + ':' + m + ":" + s;
        //获取输入内容
        var oHfVal = $(this).siblings('.flex-text-wrap').find('.hf-input').val();
        console.log(oHfVal)
        var oHfName = $(this).parents('.hf-con').parents('.date-dz').siblings('.pl-text').find('.comment-size-name').html();
        var oAllVal = '回复@' + oHfName;
        if (oHfVal.replace(/^ +| +$/g, '') == '' || oHfVal == oAllVal) {

        } else {
            $.getJSON("json/pl.json", function (data) {
                var oAt = '';
                var oHf = '';
                $.each(data, function (n, v) {
                    delete v.hfContent;
                    delete v.atName;
                    var arr;
                    var ohfNameArr;
                    if (oHfVal.indexOf("@") == -1) {
                        data['atName'] = '';
                        data['hfContent'] = oHfVal;
                    } else {
                        arr = oHfVal.split(':');
                        ohfNameArr = arr[0].split('@');
                        data['hfContent'] = arr[1];
                        data['atName'] = ohfNameArr[1];
                    }

                    if (data.atName == '') {
                        oAt = data.hfContent;
                    } else {
                        oAt = '回复<a href="#" class="atName">@' + data.atName + '</a> : ' + data.hfContent;
                    }
                    oHf = data.hfName;
                });

                var oHtml = '<div class="all-pl-con"><div class="pl-text hfpl-text clearfix"><a href="#" class="comment-size-name">我的名字 : </a><span class="my-pl-con">' + oAt + '</span></div><div class="date-dz"> <span class="date-dz-left pull-left comment-time">' + now + '</span> <div class="date-dz-right pull-right comment-pl-block"> <a href="javascript:;" class="removeBlock">删除</a> <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a> <span class="pull-left date-dz-line">|</span> <a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num">666</i>)</a> </div> </div></div>';
                oThis.parents('.hf-con').parents('.comment-show-con-list').find('.hf-list-con').css('display', 'block').prepend(oHtml) && oThis.parents('.hf-con').siblings('.date-dz-right').find('.pl-hf').addClass('hf-con-block') && oThis.parents('.hf-con').remove();
            });
        }
    });
</script>
<!--删除评论块-->
<script type="text/javascript">
    $('.commentAll').on('click', '.removeBlock', function () {
        var oT = $(this).parents('.date-dz-right').parents('.date-dz').parents('.all-pl-con');
        if (oT.siblings('.all-pl-con').length >= 1) {
            oT.remove();
        } else {
            $(this).parents('.date-dz-right').parents('.date-dz').parents('.all-pl-con').parents('.hf-list-con').css('display', 'none')
            oT.remove();
        }
        $(this).parents('.date-dz-right').parents('.date-dz').parents('.comment-show-con-list').parents('.comment-show-con').remove();

    })
</script>
<!--点赞-->
<script type="text/javascript">
    $('.comment-show').on('click', '.date-dz-z', function () {
        var zNum = $(this).find('.z-num').html();
        if ($(this).is('.date-dz-z-click')) {
            zNum--;
            $(this).removeClass('date-dz-z-click red');
            $(this).find('.z-num').html(zNum);
            $(this).find('.date-dz-z-click-red').removeClass('red');
        } else {
            zNum++;
            $(this).addClass('date-dz-z-click');
            $(this).find('.z-num').html(zNum);
            $(this).find('.date-dz-z-click-red').addClass('red');
        }
    })
</script>
<!--评论js代码截止-->

<%--点赞js代码--%>
<script>
    $(function () {
        var flag = 1
        $("#imagezan").click(function () {
            // alert(flag);
            if (flag == 1) {
                $.ajax(
                    {
                        type: "POST",
                        url: "notezanAdd.zan?noteid=<%=request.getAttribute("noteid")%>",
                        // data:{"username":$("#username").val(),"password":$("#password").val()},
                        data: {"flag": flag},
                        success: function (data) {
                            $("#notezan_span").css('color', 'red');
                            var num = parseInt($("#notezan_span").text()) + 1;

                            $("#notezan_span").text(num);
                            flag = 0;
                        }
                    }
                )

            } else {
                $.ajax(
                    {
                        type: "POST",
                        url: "notezanSub.zan?noteid=<%=request.getAttribute("noteid")%>",
                        // data:{"username":$("#username").val(),"password":$("#password").val()},
                        data: {"flag": flag},
                        success: function (data) {
                            $("#notezan_span").css('color', '');
                            var num = parseInt($("#notezan_span").text()) - 1;
                            $("#notezan_span").text(num);
                            flag = 1;
                        }
                    }
                )

            }

        })

    });
</script>
</body>
</html>
